<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>研学旅行</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script type="text/javascript" th:src="@{/js/echarts.js}"></script>
    <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
</head>
<body>
    <!-- 顶部开始 -->
    <div class="container" th:include="head :: header">
    	
    </div>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <div class="wrapper">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
        	<div id="side-nav"  th:include="left :: left_nav">
        	
        	</div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
         <div class="">
                	<label class="layui-form-label">年份:</label>
                	<select class="layui-select" id="select" onchange="show()" style="width: 150px;">
                		<option th:each="itme,state : ${years}" th:text="${itme.years}">	
                		</option>
                	</select>
                	
            </div>
          <div class="content">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main" style="width: 100%;height:400px;"></div>
            <blockquote class="layui-elem-quote">
            <p >指定项目，查看相应项目报表</p>
             <div class="">
             <label class="layui-form-label">年份:</label>
                	<select class="layui-select" id="years" onchange="show2()" style="width: 150px;">
                		<option th:each="itme,state : ${years}" th:text="${itme.years}">	
                		</option>
                	</select>
                	
                	<br>
                	
                	<label class="layui-form-label">项目名称:</label>
                	<select class="layui-select" id="name" onchange="show2()" style="width: 150px;">
                		<option th:each="itme,state : ${project}" th:text="${itme.projectname}">
                			
                		</option>
                	</select>
                	
            </div>
				<a id="daoru" class="layui-btn" style="position:absolute;right: 50px;top:530px" onclick="daoru()" >生成Excel文件</a>
				
               <table class="layui-table" >
  					<thead>
  						<tr>
  							<th>月份</th>
  							<th>人气数(被玩数)</th>
  						</tr>
  					</thead>
  					<tbody id="tb">
  								
  					</tbody>
  					
				</table>
            </blockquote>
            <!-- 右侧内容框架，更改从这里结束 -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->
    <div class="footer">
        <div class="copyright">Copyright ©2019 研学旅行管理系统</div>  
    </div>
    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
    <div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="item" th:src="@{/images/a.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/b.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/c.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/d.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/e.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/f.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/g.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/h.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/i.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/j.jpg}" alt=""></div>
                <div class="swiper-slide"><img class="item" th:src="@{/images/k.jpg}" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>   
    </div>
    <!-- 背景切换结束 -->
        
        <script src="http://cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script>
        <script type="text/javascript" th:src="@{/js/echarts-for-x-admin.js}"></script>
		<script type="text/javascript" th:src="@{/js/vue.js}" ></script>
        <script type="text/javascript">
        var project=[];
        
   	 var vue = new Vue({
		 
		 el:".bg-out",
		 data : {
			 legend : [],
			 series : [],
	         RenQi : {
	        		 name:'a',
	        		 renQi:[]
	        	 }
		 }
		 
	 });
   	 
   	 function daoru(){
   		var name =$("#name").val();
   		var years = $("#years").val();
   		hahaurl = "http://localhost:8080/daoru?projectname=";
   		hahaurl2 = hahaurl+name;
   		hahaurl3 = hahaurl2+"&years="+years;
   		window.location.href=hahaurl3; 
   	 }
   	 
   	 show2();
   	 function show2(){
   		 var name =$("#name").val();
   		var years = $("#years").val();
   		 $.ajax({
   			url:"http://localhost:8080/toAjaxProject",
   			data:{
   				name:name,
   				years : years
   			},
   			type:"post",
   			dataType:"json",
   			success:function(data){
   				var user='';
 				for(var i =0;i<data.length;i++){
 					user+="<tr>";
					user+="<td>"+data[i].months+"</td>";
					user+="<td>"+data[i].renQi+"</td>";
					user+="</tr>";
				}
 				$("#tb").html(" ");
				$("#tb").append(user);
   				
   			}
   			
   		});
   	 }
   	 
   	show();
   	 function show(){
   		var id = $("#select").val();
    	 $.ajax({
  			url:"http://localhost:8080/ajaxToQuery",
  			data:{
  				years:id
  			},
  			type:"post",
  			dataType:"json",
  			success:function(data){
  				console.log(data.length);
  				project=[];
  				vue.series=[];
  				for(var i = 0;i<data.length;i++){
  					project[i]=data[i].name;
  					vue.series[i]={
								name:project[i],//射击
								type:'line',
								stack: '总量',
                     		data:data[i].renqi
							};
  				}
  				
  				begin();
  				vue.legend=project;
  				console.log(vue.legend);
  				
  			}
  			
  		});
   	 }
   	 
   	 
   	function begin(){
   	// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'),'echarts-for-x-admin');
        	setTimeout(function(){
        		// 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '每月项目人气统计'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data : vue.legend
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {
                            	readOnly: false,
                            	},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                            
                        },
                        itemSize:18,//工具栏 icon 的大小
                        
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series : vue.series
                    	/*[
                        {
                            name:'骑马',
                            type:'line',
                            stack: '总量',
                            data:[500, 132, 101, 134, 90, 230, 210,222,333,444,555,666]
                        } 
                        */
                    	
                };
        		
            	// 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
        	},100)
        	
   	}
       $(function(){
    	  
       });
        
       
    </script>
        
     	
</body>
</html>